<template>
  <div id="app">
    <div class="col-8 offset-2">
      <table class="table caption-top table-hover">
  <caption class="text-center">
    <h1>
      学生信息管理平台
    </h1>
    <el-button type="primary" @click="getstudents">获取学生信息</el-button>
    <el-button type="warning" @click="dialogVisible = true">添加学生信息</el-button>
    <el-input type="text" placeholder="请输入姓名" class="w-25" v-model="searchname"/><el-button type="success" @click="searchstu">搜索</el-button>
<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <div>添加学生信息</div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="resetinfo">取 消</el-button>
    <el-button type="primary" @click="addStudent">添 加</el-button>
  </span>
  <div>
    <span>学号</span><input v-model="newStudent.number">
  </div>
  <div>
    <span>姓名</span><input v-model="newStudent.name">
  </div>
  <div>
    <span>年龄</span><input v-model.number="newStudent.age">
  </div>
  <div>
    <span>语文</span><input v-model.number="newStudent.chi">
  </div>
  <div>
    <span>数学</span><input v-model.number="newStudent.math">
  </div>
  <div>
    <span>英语</span><input v-model.number="newStudent.eng">
  </div>
</el-dialog>

<el-button type="info" @click="dialogVisiblelogin = true">登录</el-button>

<el-dialog
  title="登录"
  :visible.sync="dialogVisiblelogin"
  width="30%"
  :before-close="handleClose">
  <span>用户名</span><input type="text" v-model="userlogin.username"/>
  <br>
  <span>密码</span><input type="password" v-model="userlogin.password">
  <span slot="footer" class="dialog-footer">
    <el-button @click="resetinfo2">取 消</el-button>
    <el-button type="primary" @click="login">确 定</el-button>
  </span>
</el-dialog>

  </caption>
  <thead>
    <tr>
      <th scope="col">学号</th>
      <th scope="col">姓名</th>
      <th scope="col">年龄</th>
      <th scope="col">语文</th>
      <th scope="col">数学</th>
      <th scope="col">英语</th>
      <th></th>
      <th scope="col">操作</th>
    </tr>
  </thead>
  <tbody>
    <Student v-for="stu in fenye" :key="stu.id" :student="stu"></Student>
    
  </tbody>
</table>
<div class="text-center">
  <el-button-group>
  <el-button type="primary" icon="el-icon-arrow-left" @click="lastpage">上一页</el-button>
  <el-button type="primary" @click="nextpage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Student from './components/Student'
export default {
  name: 'App',
  components: {
    Student
  },
  data(){
    return{
      userlogin:{
        username:"",
        password:""
      },
      searchname:"",
      students:[],
      page:1,
      dialogVisible: false,
      dialogVisiblelogin:false,
      newStudent:{
        number:"",
        name:"",
        age:"",
        chi:"",
        math:"",
        eng:""
      }
    }
  },
  computed:{
    fenye(){
      
      return this.students.slice(this.page*5-5,this.page*5)
    }
  },  
  created(){
    this.getstudents()
  },
  methods:{
    login(){
      axios({
        url:"http://localhost:8088/login",
        method:"POST",
        data:this.userlogin
      }).then((res)=>{
        if(res.data=="0"){
          sessionStorage.setItem("islogined","true")
          
        }
        else{
          alert("用户名或密码错误")
        }
        this.resetinfo2()
      })
    },
    searchstu(){
      axios({
        url:"http://localhost:8088/search",
        method:"POST",
        data:{
          name:this.searchname
        }
      }).then(res=>{
          this.page=1
          this.students=res.data
        })
    },
    nextpage(){
      if(this.page>(this.students.length/5)){
        return
      }
      this.page+=1
    },
    lastpage(){
      if(this.page<=1){
        return
      }
      this.page-=1
    },
    getstudents(){
      if(sessionStorage.getItem("islogined")=="true"){
        axios({
        url:"http://localhost:8088/students",
        method:'GET'
      }).then(res=>{
        this.students=res.data
        console.log(res.data)
      })
      }
      else{
        alert("请先登录")
      }
      
    },
    resetinfo(){
      this.newStudent.name="",
            this.newStudent.chi="",
            this.newStudent.math="",
            this.newStudent.eng="",
            this.newStudent.number="",
            this.newStudent.age=""
            this.dialogVisible=false
    },
    resetinfo2(){
            this.userlogin.username="",
            this.userlogin.password="",
            this.dialogVisiblelogin=false
    },
    handleClose() {
        this.$confirm('确认关闭？')
          .then(()=> {
            this.resetinfo()
          })
      },
    addStudent(){
      if(sessionStorage.getItem("islogined")=="true"){
        axios({
        url:"http://localhost:8088/add",
        method:"POST",
        data:this.newStudent
      })
      .then(()=>{
        this.getstudents()
      })
      
      this.resetinfo()
      }
      else{
        alert("请先登录")
      }
      
    }

  }
}
</script>

<style>

/* body{
  background-image:url("./assets/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
} */
</style>
